<template>
  <div id="webgl-container" class="webgl-container">
    <canvas id="webgl" class="webgl"/>
  </div>

  <MoreInfo>
    <p>Clock - 基于时间的动画</p>
    <p>gsap - 补间动画</p>
    <HighlightJS :code="code1" />
    <p>AnimationMixer - 模型动画（要添加光照，不然看不到模型）</p>
    <HighlightJS :code="code2" />
  </MoreInfo>
</template>

<script setup>
import gsap from 'gsap'
import { AmbientLight, AnimationMixer, BoxGeometry, Mesh, MeshBasicMaterial, SphereGeometry } from 'three'
import { GLTFLoader } from 'three/examples/jsm/Addons'

import HighlightJS from '@/components/HighlightJS.vue'
import MoreInfo from '@/components/MoreInfo.vue'
import { useThree } from '@/hooks/use-three-hook'

const code1 = `
  gsap.to(sphere.position, {
    y: Math.sin(elapsedTime) * 2, // 目标位置：y坐标值
    duration: 4, // 动画持续时间：4秒
    yoyo: true, // 是否启用往返动画：开启
    repeat: -1 // 重复次数：无限循环(-1表示无限)
  })
`

const code2 = `
  // 使用 AnimationMixer 处理模型动画
  loader.load('/models/Flamingo.glb', (gltf) => {
    const mesh = gltf.scene
    scene.value.add(mesh)

    // 创建动画混合器
    mixer = new AnimationMixer(mesh)
    // 播放第一个动画，设置时长为3秒
    mixer.clipAction(gltf.animations[0]).setDuration(3).play()
  })

  // 在渲染循环中更新
  function animate() {
    requestAnimationFrame(animate)
    
    // 更新 mixer（通常传入时间差）
    const delta = clock.getDelta()
    mixer.update(delta)
    
    renderer.render(scene, camera)
  }
  animate()
`

const { scene, camera, addAnimationCallback } = useThree()

// 创建对象
let cube
let sphere
let mixer
const loader = new GLTFLoader()

// 设置光源
const setupLights = (scene) => {
  // 环境光 - 提供基础照明
  const ambientLight = new AmbientLight(0xffffff, 0.3)
  scene.add(ambientLight)

  return {
    ambientLight
  }
}

onMounted(() => {
  if (scene.value && camera.value) {
    setupLights(scene.value)

    // 创建立方体
    const cubeGeometry = new BoxGeometry(1, 1, 1)
    const cubeMaterial = new MeshBasicMaterial({ color: 0x00ff00 })
    cube = new Mesh(cubeGeometry, cubeMaterial)
    cube.position.x = -2
    scene.value.add(cube)

    // 创建球体
    const sphereGeometry = new SphereGeometry(0.5, 32, 32)
    const sphereMaterial = new MeshBasicMaterial({ color: 0xff0000 })
    sphere = new Mesh(sphereGeometry, sphereMaterial)
    sphere.position.x = 2
    scene.value.add(sphere)

    // 添加模型
    loader.load('/models/Flamingo.glb', (gltf) => {
      const mesh = gltf.scene
      const s = 0.01
      mesh.scale.set(s, s, s)
      scene.value.add(mesh)

      // 创建动画混合器
      mixer = new AnimationMixer(mesh)
      // 播放第一个动画，设置时长为3秒
      mixer.clipAction(gltf.animations[0]).setDuration(3).play()
    })

    // 添加自定义动画逻辑
    addAnimationCallback((delta, elapsedTime) => {
      // 立方体旋转
      if (cube) {
        cube.rotation.x += delta
        cube.rotation.y += delta * 0.5
      }

      // 球体上下移动（正弦运动）
      if (sphere) {
        gsap.to(sphere.position, {
          y: Math.sin(elapsedTime) * 2, // 目标位置：y坐标值
          duration: 4, // 动画持续时间：4秒
          yoyo: true, // 是否启用往返动画：开启
          repeat: -1 // 重复次数：无限循环(-1表示无限)
        })
      }

      // 颜色变化
      if (sphere && sphere.material instanceof MeshBasicMaterial) {
        const hue = (elapsedTime * 0.1) % 1
        sphere.material.color.setHSL(hue, 1, 0.5)
      }

      // 模型动画
      if(mixer) {
        mixer.update(delta)
      }
    })
  }
})
</script>
